<template>
  <div class="background-page">
    <header class="header-bar">
      <h2>切换壁纸</h2>
    </header>
    <div class="content">
      <div class="background-active">
        <div
          v-if="$root.config.background.type == 'image'"
          class="image"
          :style="{
            backgroundImage: `url('${$root.config.background.url}')`
          }"
        ></div>
        <div
          v-else-if="$root.config.background.type == 'color'"
          class="color"
          :style="{
            backgroundImage: `${$root.config.background.url}`
          }"
        ></div>
        <div
          v-else-if="$root.config.background.type == 'video'"
          class="color"
          :style="{
            backgroundColor: `url('${$root.config.background.url}')`
          }"
        ></div>
      </div>
      <div class="backgroung-wrap">
        <tab-bar :tabs="tabs" />
        <component :is="backgroundComponentName" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'background-setting',
  data () {
    return {
      backgroundComponentName: 'solid-color',
      tabs: [
        {
          title: '纯色',
          component: 'solid-color'
        },
        {
          title: '官方壁纸',
          component: 'solid-color'
        },
        {
          title: '必应壁纸',
          component: 'solid-color'
        },
        {
          title: '动态壁纸',
          component: 'solid-color'
        },
        {
          title: 'Unsplash',
          component: 'solid-color'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.background-page {
  .header-bar {
    background: #fff;
    line-height: 50px;
    h2 {
      font-size: 14px;
      padding: 0 20px;
    }
  }
  .content {
    padding: 20px;
    .background-active {
      width: 100%;
      height: 160px;
      border-radius: 4px;
      overflow: hidden;
      .image, .color {
        width: 100%;
        height: 160px;
        background-size: cover;
        background-position: center;
      }
    }
    .backgroung-wrap {
      margin-top: 20px;
    }
  }
}
</style>
